<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Fix Pointer Focus Children Browser Bug</title>
  <style>
    .flex {
      display: -webkit-flexbox;
      display:     -ms-flexbox;
      display:            flex;
      width: 300px;
    }

    .flex > span {
      display: block;
      -ms-flex: 1 1 100px;
          flex: 1 1 10px;
    }

    body :focus {
      outline: 1px solid red;
    }
  </style>
</head>
<body>
  <h1>Unhandled Flexbox Click Focus</h1>

  <h2>Natural</h2>
  <div id="natural-fail-source" tabindex="-1">target</div>

  <h2>Normal</h2>
  <div id="normal-fail-target" tabindex="-1">
    <span id="normal-fail-source">target</span>
  </div>

  <h2>Flexed Child</h2>
  <div id="child-fail-target" tabindex="-1" class="flex">
    <span id="child-fail-source">target</span>
    <span>two</span>
  </div>

  <h2>Flexed Descendant</h2>
  <div id="nested-fail-target" tabindex="-1">
    <div id="nested-fail-wrapper" class="flex">
      <span id="nested-fail-source">target</span>
      <span>two</span>
    </div>
  </div>

  <h2>Normal Redirect</h2>
  <div id="redirect-fail-wrapper">
    <input id="redirect-fail-target">
    <label for="redirect-fail-target" id="redirect-fail-source">target</label>
  </div>

  <h2>Flexed Redirect</h2>
  <div id="redirect-flexed-fail-wrapper">
    <input id="redirect-flexed-fail-target">
    <label for="redirect-flexed-fail-target" class="flex">
      <span id="redirect-flexed-fail-source">target</span>
      <span>two</span>
    </label>
  </div>

  <hr>

  <h1>Handled Flexbox Click Focus</h1>
  <div id="engage-fix">
    <h2>Natural</h2>
    <div id="natural-fixed-source" tabindex="-1">target</div>

    <h2>Normal</h2>
    <div id="normal-fixed-target" tabindex="-1">
      <span id="normal-fixed-source">target</span>
    </div>

    <h2>Flexed Child</h2>
    <div id="child-fixed-target" tabindex="-1" class="flex">
      <span id="child-fixed-source">target</span>
      <span>two</span>
    </div>

    <h2>Flexed Descendant</h2>
    <div id="nested-fixed-target" tabindex="-1">
      <div id="nested-fixed-wrapper" class="flex">
        <span id="nested-fixed-source">target</span>
        <span>two</span>
      </div>
    </div>

    <h2>Normal Redirect</h2>
    <div id="redirect-fixed-wrapper">
      <input id="redirect-fixed-target">
      <label for="redirect-fixed-target" id="redirect-fixed-source">target</label>
    </div>

    <h2>Flexed Redirect</h2>
    <div id="redirect-flexed-fixed-wrapper">
      <input id="redirect-flexed-fixed-target">
      <label for="redirect-flexed-fixed-target" class="flex">
        <span id="redirect-flexed-fixed-source">target</span>
        <span>two</span>
      </label>
    </div>
  </div>

  <script src="../../node_modules/requirejs/require.js"></script>
  <script>
    require.config({
      paths: {
        ally: '../../dist/amd',
        // shims required by ally.js
        'css.escape': '../../node_modules/css.escape/css.escape',
        'platform': '../../node_modules/platform/platform',
      }
    });

    require([
      'ally/util/platform',
      'ally/fix/pointer-focus-children',
    ], function(platform, fixPointerFocusChildren) {
      window._platform = platform;

      fixPointerFocusChildren({
        context: '#engage-fix',
      });
    });
  </script>
</body>
</html>
